<template>
    <div class="mainpage">
        <HEADER/>
        <el-container style="height:100%;margin-top: 10vh">
            <el-aside  width="220px" height="90%" style="background-color: #2C3951">
                <NavMenu/>
            </el-aside>
            <el-container>
                <!-- 这里是主题内容 使用components -->
                <Particles/>
                <router-view></router-view>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import axios from "axios"
    import HEADER from '../components/Header.vue'
    import NavMenu from '../components/NavMenu.vue'
    import Particles from '../components/BackGround.vue'
    export default {
        name: "MainPage",
        components : {
            HEADER,
            NavMenu,
            Particles
        },
        data(){
            return {fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
        },
        methods: {
            send(){
                axios.post('/api/testpage/givesome',{
                    page:'Mainpage'
                }).then(
                    res =>{
                        console.log(JSON.stringify(res));
                        alert(JSON.stringify(res));
                    }
                )
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
        }
    }
</script>
<style scoped>
    .mainpage{
        min-height: 100vh;
        height: auto;
    }
</style>
